/**
 * Created by HZH
 * Date-Time: 2022-02-16
 */

import * as charts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import React from 'react';

export default (props) => {
  const { height = '240px', value = 0 } = props;
  const option = {
    tooltip: {
      show: false,
    },
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 20,
        itemStyle: {
          color: '#58D9F9',
          shadowColor: 'rgba(0,138,255,0.45)',
          shadowBlur: 10,
          shadowOffsetX: 2,
          shadowOffsetY: 2,
        },
        progress: {
          show: true,
          roundCap: true,
          width: 18,
        },
        pointer: {
          length: '50%',
          width: 8,
          offsetCenter: [0, '5%'],
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 18,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          fontSize: 16,
          color: '#fff',
          valueAnimation: true,
          formatter: function (value) {
            return `处理率：${value.toFixed(0)}%`;
          },
          rich: {
            value: {
              fontSize: 50,
              fontWeight: 'bolder',
              color: '#777',
            },
            unit: {
              fontSize: 20,
              color: '#999',
              padding: [0, 0, -20, 10],
            },
          },
        },
        data: [
          {
            value: value,
          },
        ],
      },
    ],
  };

  return <ReactEcharts style={{ height, width: '100%' }} option={option} />;
};
